<template>
	<view class="detail">
		<view class="tabbox">
			<view class="">提现金额</view>
			<input name="name" type="text" placeholder="请输入" v-model="datalist.withdrawAmout" />
		</view>
		<view class="tabbox">
			<view class="">提现银行</view>
			<input name="name" value="" placeholder="请输入" v-model="datalist.tradeBankName" />
		</view>
		<view class="tabbox">
			<view class="">银行卡号</view>
			<input name="name" value="" placeholder="请输入" v-model="datalist.tradeBankNo" />
		</view>
		<view class="tabbox">
			<view class="">卡号户主名</view>
			<input name="name" value="" placeholder="请输入" v-model="datalist.tradeAccountName" />
		</view>
		<view class="tabbox">
			<view class="">户主手机号</view>
			<input name="name" value="" placeholder="请输入" v-model="datalist.tradeBankMobile" />
		</view>
		<view class="tabbox">
			<view class="">短信验证码</view>
			<input name="name" value="" placeholder="请输入" v-model="datalist.tradeVfCode" style="width: 200rpx;" />
			<view class="user-text" style="display: inline-block;color: #fff;margin-left: 40rpx; text-align: center;line-height: 70rpx;
				background: #3e72e1;border-radius: 8rpx;padding: 6rpx;width: 100rpx;">
				<text v-if="countdown==60" @click="getYZM()">发送</text>
				<text v-else >{{countdown}}秒</text>
			</view>
		</view>
		<view class="btn" @click="addlist">
			确认提现24小时到账
		</view>
	</view>
</template>

<script>
	import { withdrawOrderSave } from '@/api/new.js'
	import { sendWDCode} from '../../api/user.js'
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				datalist:{
					 storeId:'',
					 tradeBankName:'',
					 tradeBankNo:'',
					 withdrawAmout:'',
					 tradeAccountName:'',
					 tradeBankMobile:'',
					 tradeVfCode:''
				},
				userVfCode:'1111',
				countdown: 60
			}
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		methods: {
			getYZM(){
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (!reg.test(this.datalist.tradeBankMobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号'
					})
					this.datalist.tradeBankMobile = '';
					return false;
				}else{
					sendWDCode(this.datalist.tradeBankMobile).then(res => {
						this.userVfCode = res.data.data
						uni.showToast({
							title: '已发送短信验证码',
							icon:"none"
						})
						this.startCountdown()
					})
				}
			},
			startCountdown() {
			    const timer = setInterval(() => {
					if(this.countdown > 0){
						this.countdown--;  // 每秒减1
					}else{
						this.countdown = 60
						clearInterval(timer);  // 倒计时结束，清除定时器
					}
				}, 1000);
			},
			addlist(){
				if(this.userVfCode == this.datalist.tradeVfCode){
					if(this.datalist.tradeBankMobile !=''&&this.datalist.tradeBankName !=''
						&&this.datalist.tradeBankNo !=''&&this.datalist.withdrawAmout !=''&&this.datalist.tradeAccountName !=''){
						var data = this.datalist
						data.storeId = this.userInfo.storeId
						withdrawOrderSave(data).then(res => {
							if(res.data.code==200){
								uni.showToast({
									title: '提交成功',
									icon:"none"
								})
								setTimeout(() => {
									uni.navigateTo({
									    url: '/pages/my-order/index'
									});
								}, 2000)
							}else{
								uni.showToast({
									title: res.data.msg,
									icon:"none"
								})
							}
							
						})
					}else{
						uni.showToast({
							title: '请完整输入信息',
							icon:"none"
						})
					}
				}else{
					uni.showToast({
						title: '验证码输入错误或已过期，请重新输入',
						icon:"none"
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	.detail{
		width: 90%;
		height: 800rpx;
		margin: 0 auto;
		padding: 50rpx 0 0 30rpx; 
	}
	.tabbox{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		margin: 30rpx 0;
	}
	.tabbox view{
		width: 200rpx;
	}
	.tabbox input{
		padding-left: 20rpx;
		height: 80rpx;
		width: 400rpx;
		line-height: 80rpx;
		border: 1rpx solid #d1d1d1;
	}
	.btn{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		width: 400rpx;
		border-radius: 20rpx;
		color: #fff;
		background: #3e72e1;
		margin: 0 auto;
		margin-top: 200rpx;
	}
</style>
